<template>
  <div class="scrollBox">
    <div class="header">
      <router-link
        tag="i"
        class="iconfont icon-zuojiantou"
        to="/Home"
      ></router-link>
      <!-- <i ></i> -->
      <div class="searcheBox">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" placeholder="搜索商品/店铺/种类" />
        <div>
          <i class="iconfont icon-guanbi1"></i>
        </div>
      </div>
      <i class="iconfont icon-gengduo3"></i>
    </div>
    <div class="content" :style="{ top: top, bottom: bottom }">
      <div class="left" ref="left">
        <!-- 必须获取ul滚动区域，上一个父元素对象 ref="left" -->
        <ul>
          <!-- class="current" -->
          <li
            :class="{ current: currentIndex == index }"
            v-for="(item, index) in cont"
            :key="index"
            @click="selectItem(index, $event)"
          >
            <span class="left-item">{{ item.title }}</span>
          </li>
        </ul>
      </div>
      <div class="right" ref="right">
        <!-- <div class="banner">
          <img src="../../assets/images/children.jpg" alt="" />
        </div> -->
        <ul>
          <li
            v-for="(v1, i) in cont[currentIndex].pile[0].group"
            :key="i"
            class="right_item"
          >
            <h2>
              {{ v1.group_name }}
              <i class="iconfont icon-youjiantou" />
              <span class="hotSell" v-if="v1.more"
                >{{ v1.more }}<i class="iconfont icon-youjiantou"
              /></span>
            </h2>
            <div class="lists">
              <div v-for="(v2, j) in v1.detail" :key="j" v-show="j < 6">
                <div v-if="v2.icon != -1">
                  <img :src="v2.icon" />
                </div>
                <span :class="{ active: j == 2 }">
                  {{ v2.title }}
                  <i class="hot" v-show="v2.hot != -1"></i>
                </span>
              </div>
              <!-- <div>
                <span>
                  展开
                  <i class="moreList"><i>
                </span>
              </div> -->
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 按需加载
import BScroll from "@better-scroll/core";

export default {
  data() {
    return {
      cont: [],
      listsHeight: [], //存储高度
      currentIndex: 0,
      scrollY: "", //右侧滚动条高度  实时数据
    };
  },
  //   props:["left","right","top","bottom"],
  props: {
    top: {
      default: "40px",
    },
    bottom: {
      default: "40px",
    },
  },
  created() {
    this.cont = require("../../../public/jSON/cate");
    // console.log(this.cont);
    // console.log(this.cont[0].pile[0].group);
    // console.log(this.cont[0].pile[0].group[0].detail[0].hot);
  },
  methods: {
    // 滚动效果初始化方法
    _initScroll() {
      // 左侧滚动效果初始化
      this.lefts = new BScroll(this.$refs.left, {
        click: true, //点击触发
        probeType: 3, //深针的效果，时时获取滚动高度
      });

      // 右侧滚动效果初始化
      this.rights = new BScroll(this.$refs.right, {
        probeType: 3, //深针的效果，时时获取滚动高度
      });

      // 获取滚动高度
      this.rights.on("scroll", (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y)); //当前滚动条高度
      });
    },
    // 获取右侧每一个li高度
    // _getHegiht() {
    //   let rightItems = this.$refs.right.getElementsByClassName("right_item");
    //   let height = 0;
    //   this.listsHeight.push(height);
    //   for (let i = 0; i < rightItems.length; i++) {
    //     let item = rightItems[i];
    //     height += item.clientHeight; //获取高
    //     this.listsHeight.push(height);
    //   }
    //   console.log(this.listsHeight);
    // },
    // 左侧点击效果
    // selectItem(index, event) {
    //   if (!event._constructed) {
    //     //如果不存在这个属性,则为原生点击事件，不执行下面的函数
    //     return;
    //   } else {
    //     // 获取右侧所有对象
    //     let rightItems = this.$refs.right.getElementsByClassName("right_item");
    //     let el = rightItems[index]; //左侧点击位置，对应右侧滚动对象
    //     // 插件内置方法scrollToElement(对象,滚动速度)
    //     this.rights.scrollToElement(el, 300);
    //   }
    //   this.currentIndex = index;
    // },
    selectItem(index) {
      this.currentIndex = index;
    },
  },
  // 页面挂载后生命周期函数
  // 引入第三方js库
  // vue页面加载慢，第三方js库提前加载问题?
  // vm.$nextTick() 方法 保证vue执行完，页面挂载数据后，再执行第三方库
  mounted() {
    this.$nextTick(() => {
      this._initScroll();
      // this._getHegiht();
    });
  },
  // 计算属性
  // computed: {
  //   currentIndex() {
  //     for (let i = 0; i < this.listsHeight.length; i++) {
  //       let height = this.listsHeight[i];
  //       let height2 = this.listsHeight[i + 1];

  //       if (!height2 || (this.scrollY >= height && this.scrollY < height2)) {
  //         // 控制左侧li位置
  //         let leftItems = this.$refs.left.getElementsByTagName("li");
  //         this.lefts.scrollToElement(leftItems[i], 200);
  //         return i;
  //       }
  //     }

  //     return 0;
  //   },
  // },
};
</script>

<style lang="less">
ul {
  list-style: none;
}
.header {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0px 5px;
  .searcheBox {
    position: relative;
    .icon-sousuo {
      position: absolute;
      left: 10px;
      font-size: 14px;
      top: 6px;
      color: #83868e;
    }
    div {
      position: absolute;
      right: 10px;
      top: 4px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #c8c8c8;
      text-align: center;
      line-height: 18px;
      i {
        font-size: 12px;
        color: #d4d4d4;
      }
    }
    input {
      width: 200px;
      height: 25px;
      background-color: #e8ecf0;
      font-size: 14px;
      border-radius: 15px;
      padding: 0 30px;
      &::placeholder{
        font-size: 14px;
      }
    }
  }
}
.content {
  background-color: #eff4fa;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  display: flex;
  overflow: hidden;
}
.content .left {
  flex: 0 0 80px;
  // position: fixed;
  // top: 40px;
  background-color: white;
}
.content .left li {
  width: 100%;
  text-align: center;
}
.content .left li.current span {
  color: red;
  font-size: 16px;
  background-color: #eff4fa;
}
.content .left li span {
  display: block;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
}
.content .right {
  flex: 1;
  margin-left: 10px;
  padding-top: 10px;
}
.content .right .banner {
  width: 100%;
  padding: 0px 5px;
  margin-bottom: 10px;
  overflow: hidden;
  box-sizing: border-box;
  img {
    width: 100%;
    height: 100px;
    border-radius: 10px;
  }
}
// .content .right ul{
//   overflow: hidden;
// }
.content .right ul li {
  margin-bottom: 10px;
}
.content .right h2 {
  height: 44px;
  width: 100%;
  line-height: 44px;
  text-indent: 16px;
  font-size: 16px;
  background-color: white;
  position: relative;
  i {
    font-size: 12px;
    margin-left: 3px;
  }
  .hotSell {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 12px;
    color: #969696;
  }
}
.content .right .lists {
  display: flex;
  flex-wrap: wrap;
}
.content .right .lists div {
  img {
    width: 80px;
  }
}
.content .right .lists div {
  flex: 0 0 33.33%;
  text-align: center;
  font-size: 12px;
  background-color: white;
  // display: flex;
  // flex-wrap: wrap;
  // align-items: center;
  // justify-content: center;
  img {
    margin: 0 auto;
  }
  span {
    width: 100%;
    margin: 5px 0px;
    padding: 2px;
    height: 44px;
    line-height: 20px;
    // overflow: hidden;
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    text-overflow: ellipsis;
    position: relative;
    box-sizing: border-box;
    letter-spacing: 2px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    // overflow: hidden;
    text-overflow: ellipsis;
    &::after {
      content: "";
      height: 30px;
      width: 1px;
      background-color: #e1e1e1;
      position: absolute;
      top: 7px;
      right: 0;
      margin-top: -7px;
    }
    .active {
      border-left: 1px solid rgba(136, 136, 136, 0.3);
      border-right: 1px solid rgba(136, 136, 136, 0.3);
    }

    .hot {
      position: absolute;
      top: -5px;
      right: 0;
      width: 20px;
      height: 14px;
      display: block;
      background: url(http://search.m.dangdang.com/images/icon_hot.png?v=20180205)
        center center no-repeat;
      background-size: contain;
      // background-color: yellow;
    }
  }
}
</style>